<!-- Copyright (c) 2012 Mobile Developer Solutions -->
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title></title>

	<link rel="stylesheet" href="index.css" /> 
	<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
  </head>
  
  <body onload="init();">
	<div id="header" >
		<h1><strong>MDS</strong> Phone<strong>Gap</strong> API Demo</h1>
	</div>
	<div id="subheader">
            <select>
            	<option value="intro">PhoneGap API</option>
            	<option value="accelerometer">Accelerometer</option>
				<option value="camera">Camera</option>
				<option value="capture">Capture</option>
				<option value="compass">Compass</option>
				<option value="connection">Connection</option>
				<option value="contacts">Contacts</option>
				<option value="device">Device</option>
				<option value="events">Events</option>
				<option value="file">File</option>
				<option value="geolocation">Geolocation</option>
				<option value="media">Media</option>
				<option value="notification">Notification</option>
				<option value="storage">Storage</option>
			</select>
    </div>
	
	<div id="sidebar">
			<ul>
				<li><a id="intro"><b>PhoneGap API</b></a></li>
				<li><a id="accelerometer">Accelerometer</a></li>
				<li><a id="camera">Camera</a></li>
				<li><a id="capture">Capture</a></li>
				<li><a id="compass">Compass</a></li>
 				<li><a id="connection">Connection</a></li>
				<li><a id="contacts">Contacts</a></li>
				<li><a id="device">Device</a></li>
				<li><a id="events">Events</a></li>
				<li><a id="file">File</a></li>
				<li><a id="geolocation">Geolocation</a></li>
				<li><a id="media">Media</a></li>
				<li><a id="notification">Notification</a></li>
				<li><a id="storage">Storage</a></li>
			</ul>
	</div><!-- /sidebar -->
	<div id="scrollable">
        <div id="content">                
		    <div class="api-div" id="api-intro">
		         <h2>PhoneGap</h2>
				<blockquote>
  					<p>An HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores.</p>
				</blockquote>

				<div>
				<h4>Select a <b>PhoneGap API </b>to see it demonstrated.</h4>
				<h4 class="help">See <b>assets/www/apis/</b> for JavaScript implementations of each API.</h4>
				
				<p style="color:#767573;">&copy; 2012 Mobile Developer Solutions</p>
				</div>		    					
			</div>

		    <div class="api-div" id="api-accelerometer">
		         <h2>Accelerometer</h2>
				<blockquote>
  					<p>Captures device motion in the x, y, and z direction.</p>
				</blockquote>
				<h4 class="help"><b>Toggle</b> to stop/start
				accelerometer watch.<br/><b>Get Current</b> for one-time accelerometer reading.</h4>
				<a class="btn deux" onclick="toggleAccel();">Toggle</a>
				<a class="btn deux" onclick="getAccel();">Get Current</a>
    			<dl id="accel-data">
      				<dt>X:</dt><dd id="x">&nbsp;&nbsp;&nbsp;</dd>
      				<dt>Y:</dt><dd id="y">&nbsp;&nbsp;&nbsp;</dd>
      				<dt>Z:</dt><dd id="z">&nbsp;&nbsp;&nbsp;</dd>
   				 </dl>
    			<div>Timestamp: <b id="accel_timestamp">0</b></div>
			</div>

		    <div class="api-div" id="api-camera">
                <h2>Camera</h2>
				<blockquote>
  					<p>The <code>camera</code> object provides access to the device's default camera application.</p>
				</blockquote>
				<h4 class="help"><b>Take a Picture</b> using device camera.<br/>
				<b>Select</b> to get picture from album or library.</h4>
				<a class="btn deux" onclick="take_pic();">Take a Picture</a>
				<a class="btn deux" onclick="album_pic();">Select</a>
				<div class="result-block"></div>			
      			<img id="cameraImage" src="" />
			</div>

		    <div class="api-div" id="api-capture">
				<h2>Capture</h2>
				<blockquote>
					<p>Provides access to the audio, image, and video capture capabilities of the device.</p>
				</blockquote>
				<a class="btn trois" onclick="captureAudio();">Audio</a>
				<a class="btn trois" onclick="captureImage();">Image</a>
				<a class="btn trois" onclick="captureVideo();">Video</a>
				<div class="result-block">
				Capture Result: <span id="capture-result"></span><br/>
				<span id="format-data"></span><br/>
				</div>
			</div>

		    <div class="api-div" id="api-compass">
				<h2>Compass</h2>
				<blockquote>
					<p>Obtains the direction that the device is pointing.</p>
				</blockquote>
				<h4 class="help"><b>Toggle</b> to stop/start
				compass watch. <br/><b>Get Current</b> for one-time compass reading.</h4>
				<div>
     	 			Compass Heading: <b id="heading"></b>
     	 		</div>
				<a class="btn deux" onclick="toggleCompass();">Toggle</a>
				<a class="btn deux" onclick="getCurrentHeading();">Get Current</a>
    		</div>

		    <div class="api-div" id="api-connection">
				<h2>Connection</h2>
				<blockquote>
  					<p>The <code>connection</code> object gives access to the device's cellular and wifi connection information.</p>
				</blockquote>
   				<a class="btn" onclick="check_network();">Check Connection</a>
   				<div class="result-block">
   				Connection: <b id="connectionstate"></b>   
   				</div>
			</div>

		    <div class="api-div" id="api-contacts">
				<h2>Contacts</h2>
				<blockquote>
  					<p>The <code>contacts</code> object provides access to the device contacts database.</p>
				</blockquote>
   				<a class="btn" onclick="get_contacts();">Check Contacts</a>
   				<div class="result-block">
   					<span id="contacts-output"></span>
   				</div>
			</div>

		    <div class="api-div" id="api-device">
				<h2>Device</h2>
				<blockquote>
					<p>The <code>device</code> object describes the device's hardware and software.</p>
				</blockquote>
				<h4><b>Important</b> Access <code>device</code> object only after <code>deviceready</code> event.</h4>
       			<table id="deviceinfo">
  					<tr>
   					 	<th>Device</th>
   					 	<th class="alt">Value</th>
  					</tr>
  					<tr>
    					<td>Name</td>
    					<td class="alt"><strong id="name">&nbsp;</strong></td>
  					</tr>
  					<tr>
    					<td>Platform</td>
   					 	<td class="alt"><strong id="platform">&nbsp;</strong></td>
  					</tr>
  					<tr>
    					<td>PhoneGap Version</td>
   					 	<td class="alt"><strong id="pgversion">&nbsp;</strong></td>
  					</tr>
  					<tr>
    					<td>UUID</td>
   					 	<td class="alt"><strong id="uuid">&nbsp;</strong></td>
  					</tr>
  					<tr>
    					<td>OS Version</td>
   					 	<td class="alt"><strong id="version">&nbsp;</strong></td>
  					</tr>
  					<tr>
   					 	<th>Screen</th>
   					 	<th class="alt">Value</th>
  					</tr>
  					<tr>
    					<td>Width</td>
    					<td class="alt"><strong id="width">&nbsp;</strong></td>
  					</tr>
   					<tr>
    					<td>Height</td>
    					<td class="alt"><strong id="height">&nbsp;</strong></td>
  					</tr>
   					<tr>
    					<td>Available Width</td>
    					<td class="alt"><strong id="availwidth">&nbsp;</strong></td>
  					</tr>
   					<tr>
    					<td>Available Height</td>
    					<td class="alt"><strong id="availheight">&nbsp;</strong></td>
  					</tr>
   					<tr>
    					<td>Color Depth</td>
    					<td class="alt"><strong id="colorDepth">&nbsp;</strong></td>
  					</tr> 					
				</table>					
			</div>

		    <div class="api-div" id="api-events">
				<h2>Events</h2>
				<blockquote>
					<p>PhoneGap lifecycle events.</p>
				</blockquote>
				<h4 class="help">Tap device (or virtual device) <code>menu</code> or <code>search</code> buttons to see example callback output.</h4>
				<span id="eventOutput"></span>
				<h4>Other event example callbacks use console.log</h4>								
			</div>

		    <div class="api-div" id="api-file">
				<h2>File</h2>
				<blockquote>
					<p>An API to read, write and navigate file system hierarchies.</p>
				</blockquote>
				<div id="file-system-text"></div>
 				<a class="btn deux" onclick="createFile();">Create</a>
 				<a class="btn deux" onclick="writeFile();">Write</a>
   				<div class="result-block">
   					Status: <span id="file-status"></span>
   					<span id="file-contents"></span>
   				</div>
   				<a class="btn deux" onclick="readFile();">Read</a>
 				<a class="btn deux" onclick="removeFile();">Remove</a>
   				<div class="result-block">
   					Read text: <span id="file-read-text"></span><br/>
   					Data Url: <span id="file-read-dataurl"></span>
   				</div>
			</div>

		    <div class="api-div" id="api-geolocation">
				<h2>Geolocation</h2>
				<blockquote>
  					<p>The <code>geolocation</code> object provides access to the device's GPS sensor.</p>
				</blockquote>
				<h4 class="help"><b>Toggle</b> to stop/start
				geolocation watch. <br/><b>Get Current</b> for one-time geolocation reading.</h4>
				<a class="btn deux" onclick="toggleWatchPosition();">Toggle</a>
   				<a class="btn deux" onclick="getCurrentPosition();">Get Current</a>
   				<div class="result-block">
   					<span id="cur_position"></span>
   				</div>
   				<img id="map" alt="Location Map"/>								
			</div>

		    <div class="api-div" id="api-media">
				<h2>Media</h2>
				<blockquote>
  					<p>The <code>Media</code> object provides the ability to record and play back audio files on a device. </p>
				</blockquote>
   				<div class="result-block">
					<b>Play MP3 Song</b>
				</div>
				<a class="btn trois" onclick="playMyAudio();">Play</a>
				<a class="btn trois" onclick="pauseAudio();">Pause</a>
				<a class="btn trois" onclick="stopAudio();">Stop</a>	
   				<div class="result-block">
					Current: <span id="audio_position">0 sec</span>
					&nbsp;&nbsp;Total: <span id=media_dur>0</span> sec
				</div><br/>
   				<div class="result-block">
					<b>Live Audio Recording (5 sec)</b>
				</div>
 				<a class="btn deux" onclick="startRecord();">Record Audio</a>
 				<a class="btn deux" onclick="playbackRecord()">Playback</a>
   				<div class="result-block">
   					Status: <span id="record-status"></span>
   					<span id="record-time"></span>
   				</div>
			</div>

		    <div class="api-div" id="api-notification">
				<h2>Notification</h2>
				<blockquote>
  					<p>Visual, audible, and tactile device notifications.</p>
				</blockquote>
				<div class="result-block">
					<a class="btn deux" onclick="showAlert();">Alert</a>
					<a class="btn deux" onclick="showConfirm();">Confirm</a></div>
				<div class="result-block">  
					<a class="btn deux" onclick="beep();" >Beep</a>
					<a class="btn deux" onclick="vibrate();" >Vibrate</a></div>  
			</div>

		    <div class="api-div" id="api-storage">
				<h2>Storage</h2>
				<blockquote>
  					<p>Provides access to the devices storage options.</p>
				</blockquote>
				<h4 class="help">Based on <b>W3C Web SQL Database Spec</b> and <b>W3C Web Storage API Spec</b></h4>							
					<a class="btn" onclick="createDB();">Create DB</a>
					<a class="btn" onclick="getSqlResultSet();">SQL Result Set</a>
				<div class="result-block">
					SQL Result: <br/><span id="sql-result"></span><br/>
				</div><br/>				
					<a class="btn" onclick="writeLocalStorage();">Write LocalStorage</a>
					<a class="btn" onclick="readLocalStorage();">Read LocalStorage</a>
					<a class="btn" onclick="removeItemLocalStorage();">Remove Item</a>
				<div class="result-block">
					Local Storage: <span id="local-storage-result"></span><br/>
				</div>
			</div>	  
      </div>
    </div>	<!-- /scrollable -->
	<div id="footer" >
		<h1>&copy; 2012 Mobile Developer Solutions</h1>
	</div>
<!--  	<script type="text/javascript" charset="utf-8" src="index.js"></script> -->
	<script type="text/javascript" charset="utf-8" src="apis/accelerometer.js"></script>
 	<script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>
 	<script type="text/javascript" charset="utf-8" src="apis/capture.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/compass.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/connection.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/contacts.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/events.js"></script>
 	<script type="text/javascript" charset="utf-8" src="apis/file.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/geolocation.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/media.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/notification.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>			
  </body>
</html>
